<template>
  <div class="online-box">
    <div class="search-box">
      <el-button type="primary" @click="goFaceCourse">新建面授课</el-button>
      <div class="search-item">
        <el-select v-model="keyCourseType" placeholder="面授课类型">
          <el-option
            v-for="item in courseTypeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-select v-model="keySellWay" placeholder="售卖方式">
          <el-option
            v-for="item in keySellWayOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-select v-model="keyStatus" placeholder="全部状态">
          <el-option
            v-for="item in keyStatusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-input v-model="keyArticleName" placeholder="请输入班级名称" style="width:200px;" />
        <el-button type="primary">搜索</el-button>
      </div>
    </div>
    <el-table :data="courseTableData" border style="width: 100%;">
      <el-table-column prop="courseName" label="面授名称" align="center">
        <template slot-scope="scope">
          <div class="showCourse">
            <div class="left-box">
              <img :src="scope.row.url" >
            </div>
            <div class="right-box">
              <div class="right-title">{{ scope.row.courseName }}</div>
              <div class="right-moeny">￥&nbsp;{{ scope.row.price }}</div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="courseType" label="面授课类型" align="center" />
      <el-table-column prop="sellWay" label="售卖方式" align="center" />
      <el-table-column prop="status" label="状态" align="center" />
      <el-table-column prop="articleNum" label="商品数量" align="center" />
      <el-table-column prop="sales" label="销量" align="center" />
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="goFaceCourse">编辑</el-button>
          <el-button type="text" @click="soldOutBtn">下架</el-button>
          <el-button type="text" @click="removeBtn">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyCourseType: '',
      keySellWay: '',
      keyStatus: '',
      keyArticleName: '',
      courseTypeOptions: [
        {
          value: '体验课',
          label: '体验课'
        },
        {
          value: '正式课',
          label: '正式课'
        }
      ],
      keySellWayOptions: [
        {
          value: '按课时',
          label: '按课时'
        },
        {
          value: '按时段',
          label: '按时段'
        },
        {
          value: '按班级',
          label: '按班级'
        }
      ],
      keyStatusOptions: [
        {
          value: '已上架',
          label: '已上架'
        },
        {
          value: '已下架',
          label: '已下架'
        },
        {
          value: '待上架',
          label: '待上架'
        }
      ],
      courseTableData: [
        {
          id: '1',
          url: '/src/assets/subjectImg.png',
          courseName: '语文作文提升',
          price: '199',
          courseType: '体验课',
          sellWay: '按课时',
          status: '已上架',
          articleNum: '100',
          sales: '21'
        }
      ],
    }
  },
  methods: {
    showClassStudent(id) {
      this.classStudentDialog = true
      // 请求对应班级学员数据
    },
    handleCurrentChange(val) {
      this.currentPage = val
    },
    goFaceCourse(e, id) {
      this.$router.push({ name: 'Newfacecourse', query: { 'classId': id }})
    },
    soldOutBtn() {
      this.$confirm('确认要下架该课程吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 下架
      })
    },
    removeBtn() {
      this.$confirm('确认要删除该课程吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 删除
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.online-box {
  .search-box {
    margin-bottom: 20px;
    .search-item {
      float: right;
    }
  }
  .showCourse {
    display: flex;
    text-align: center;
    .left-box {
      width: 100px;
      height: 68px;
      margin-right: 20px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .right-box {
      .right-title {
        color: #353535;
        margin-bottom: 24px;
      }
      .right-moeny {
        color: #f83030;
      }
    }
  }
}
</style>
